La ruta de hoja coincidente en la ubicación "/" no tiene un elemento. Esto significa que generará un <Outlet /> con un valor nulo de forma predeterminada, lo que dará como resultado una página "vacía".
//App.js File import {Route, Routes} from 'react-router-dom'; import ProductList from './ProductList'; const App = () => { return ( <Router > <Routes> <Route exact path="/" render= { props => { <ProductList {...props} products={this.state.products} currentCategory={this.state.currentCategory} addToCart={this.addToCart} info={productInfo}/> } }/> </Routes> </Router> ) } export default App;Cuando empiezo a agregar una ruta al programa da este error, creo que el problema está en el método de renderizado.
Usando un enrutador React
Su método de renderizado no devuelve ningún valor. Para devolver un valor de una función de flecha, use () o return o simplemente omita {} .
con ()
<Route exact path="/" render= { props => { (<ProductList {...props} products={this.state.products} currentCategory={this.state.currentCategory} addToCart={this.addToCart} info={productInfo} />) } } /> Con return
<Route exact path="/" render= { props => { return <ProductList {...props} products={this.state.products} currentCategory={this.state.currentCategory} addToCart={this.addToCart} info={productInfo} /> } } /> Sin {} :
<Route exact path="/" render= { props => <ProductList {...props} products={this.state.products} currentCategory={this.state.currentCategory} addToCart={this.addToCart} info={productInfo} /> } />Se solucionó eliminando el renderizado y editándolo así.
<Route exact path="/" element={< ProductList products = { this.state.products } currentCategory = { this.state.currentCategory } addToCart = { this.addToCart } info = { productInfo } />}/>